<h1 class="font-semibold uppercase hidden lg:block">
  <%= Spree.t(:my_account) %>
</h1>
<div
  data-controller="account-nav"
  class="mt-2 lg:mt-6 font-medium flex overflow-auto no-scrollbar -mx-4 mb-6 lg:mx-0 lg:mb-11 lg:flex-col"
>
  <%= link_to "#{Spree.t(:orders)} & #{Spree.t(:returns)}", spree.account_orders_path,
    data: { active: current == "orders" },
    class: "shrink-0 block lg:px-4 lg:py-3 px-3 py-4 border-b lg:border-b-0 text-neutral-700 hover:border-accent-100 hover:bg-accent-100 hover:text-black #{current == "orders" ? "lg:bg-accent border-text lg:border-b-0 lg:border-l-[1.5px]" : "border-accrent lg:border-l"}"
  %>
  <%= link_to Spree.t(:addresses), spree.account_addresses_path,
    data: { active: current == "address" },
    class: "shrink-0 block lg:px-4 lg:py-3 px-3 py-4 border-b lg:border-b-0 text-neutral-700 hover:border-accent-100 hover:bg-accent-100 hover:text-black #{current == "address" ? "lg:bg-accent border-text lg:border-b-0 lg:border-l-[1.5px]" : "border-accrent lg:border-l"}"
  %>
  <%= link_to Spree.t(:personal_details), spree.edit_account_profile_path,
    data: { active: current == "account" },
    class: "shrink-0 block lg:px-4 lg:py-3 px-3 py-4 border-b lg:border-b-0 text-neutral-700 hover:border-accent-100 hover:bg-accent-100 hover:text-black #{current == "account" ? "lg:bg-accent border-text lg:border-b-0 lg:border-l-[1.5px]" : "border-accrent lg:border-l"}"
  %>
  <%= link_to Spree.t(:wishlist), spree.account_wishlist_path,
    data: { active: current == "wishlist" },
    class: "shrink-0 block lg:px-4 lg:py-3 px-3 py-4 border-b lg:border-b-0 text-neutral-700 hover:border-accent-100 hover:bg-accent-100 hover:text-black #{current == "wishlist" ? "lg:bg-accent border-text lg:border-b-0 lg:border-l-[1.5px]" : "border-accrent lg:border-l"}"
  %>

  <% if spree.respond_to?(:account_gift_cards_path) %>
    <%= link_to Spree.t(:gift_cards), spree.account_gift_cards_path,
      data: { active: current == "gift_cards" },
      class: "shrink-0 block lg:px-4 lg:py-3 px-3 py-4 border-b lg:border-b-0 text-neutral-700 hover:border-accent-100 hover:bg-accent-100 hover:text-black #{current == "gift_cards" ? "lg:bg-accent border-text lg:border-b-0 lg:border-l-[1.5px]" : "border-accrent lg:border-l"}"
    %>
  <% end %>

  <%= link_to Spree.t(:store_credits), spree.account_store_credits_path,
    data: { active: current == "gift_cards" },
    class: "shrink-0 block lg:px-4 lg:py-3 px-3 py-4 border-b lg:border-b-0 text-neutral-700 hover:border-accent-100 hover:bg-accent-100 hover:text-black #{current == "store_credits" ? "lg:bg-accent border-text lg:border-b-0 lg:border-l-[1.5px]" : "border-accrent lg:border-l"}"
  %>

  <%= link_to Spree.t('storefront.account.newsletter_settings'), spree.edit_account_newsletter_path,
    data: { active: current == "newsletter" },
    class: "shrink-0 block lg:px-4 lg:py-3 px-3 py-4 border-b lg:border-b-0 text-neutral-700 hover:border-accent-100 hover:bg-accent-100 hover:text-black #{current == "newsletter" ? "lg:bg-accent border-text lg:border-b-0 lg:border-l-[1.5px]" : "border-accrent lg:border-l"}"
  %>

  <%= button_to Spree.t(:logout), spree_logout_path,
    class: "w-full text-left hidden shrink-0 md:block lg:px-4 lg:py-3 px-3 py-4 border-b lg:border-b-0 border-accrent lg:border-l text-neutral-700 hover:border-accent-100 hover:bg-accent-100 hover:text-black",
    method: :delete,
    data: { turbo: false } if defined?(spree_logout_path) %>
</div>
